import React, {Component} from 'react';
import {View, Text, ImageBackground, StyleSheet, StatusBar, TouchableOpacity} from 'react-native';
import {pxToDp} from "../../../../utils/styleKits";
import icon from "../../../../utils/icon";
import {NavigationContext} from '@react-navigation/native';

class CustomTabBar extends Component {
  static contextType = NavigationContext;

  render() {
    let {activeTab, tabs, goToPage} = this.props;
    return (
      <View>
        <StatusBar translucent backgroundColor={"transparent"}/>
        <ImageBackground source={require('../../../../images/headbg.png')} style={styles.headBg}>
          <View style={styles.headBox}>
            <TouchableOpacity onPress={()=>this.context.goBack()}>
              <Text style={styles.icon}>{icon.iconfanhui}</Text>
            </TouchableOpacity>
            <View style={styles.headTitleBox}>
              {
                tabs.map((item, i)=>{
                  return <TouchableOpacity onPress={()=>goToPage(i)}>
                    <Text key={i} style={{...styles.title, color: i === activeTab ?'#fff': '#eee',
                      fontSize: i === activeTab ? pxToDp(18): pxToDp(14),
                      borderBottomWidth: i ===activeTab ? pxToDp(3):0}}>
                      {item}
                    </Text>
                  </TouchableOpacity>
                })
              }
            </View>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headBg:{
    width: '100%',
  },
  headBox:{
    flexDirection:'row',
    alignItems:'center',
    marginTop: pxToDp(30),
    marginLeft: pxToDp(20),
    marginRight: pxToDp(50),
  },
  icon: {
    justifyContent:'flex-start',
    fontFamily: 'iconfont',
    color: '#fff',
    width:pxToDp(30),
    paddingBottom: pxToDp(15)
  },
  headTitleBox: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  title:{
    paddingBottom: pxToDp(15),
    borderBottomColor: '#fff',
  }
});

export default CustomTabBar;